<template>
  <div class="_main absolute">
    <div class="main">
      <div class="header">
        <img
          src="http://diandian.zgkpz.com/images/m_main/jifen.png"
          @click="jfrank"
        />
        <img
          src="http://diandian.zgkpz.com/images/m_main/wodejinbi.png"
          @click="myglod"
        />
        <img
          src="http://diandian.zgkpz.com/images/m_main/xuexijilu.png"
          @click="mylog"
        />
      </div>
      <div>
        <img
          src="http://diandian.zgkpz.com/images/m_main/tingyinshitu.png"
          class="tingyin"
        />
        <div style="width: 100%; text-align: center">
          <div class="content">
            <div class="part1">
              <img
                src="http://diandian.zgkpz.com/images/m_main/xiaoxue.png"
                class="title"
              />
              <div>
                <img
                  src="http://diandian.zgkpz.com/images/m_main/senlintanxian.png"
                />
                <img
                  src="http://diandian.zgkpz.com/images/m_main/mofachengbao.png"
                />
                <img
                  src="http://diandian.zgkpz.com/images/m_main/dongwuleyuan.png"
                />
                <img
                  src="http://diandian.zgkpz.com/images/m_main/shenqishuwu.png"
                />
              </div>
            </div>
            <div class="part1">
              <img
                src="http://diandian.zgkpz.com/images/m_main/chuzhong.png"
                class="title"
              />
              <div>
                <img
                  src="http://diandian.zgkpz.com/images/m_main/senlintanxian.png"
                />
                <img
                  src="http://diandian.zgkpz.com/images/m_main/mofachengbao.png"
                />
                <img
                  src="http://diandian.zgkpz.com/images/m_main/dongwuleyuan.png"
                />
                <img
                  src="http://diandian.zgkpz.com/images/m_main/shenqishuwu.png"
                />
              </div>
            </div>
          </div>
          <div class="content2">
            <div class="part1">
              <img
                src="http://diandian.zgkpz.com/images/m_main/gaozhong.png"
                class="title"
              />
              <div>
                <img
                  src="http://diandian.zgkpz.com/images/m_main/senlintanxian.png"
                />
                <img
                  src="http://diandian.zgkpz.com/images/m_main/mofachengbao.png"
                />
                <img
                  src="http://diandian.zgkpz.com/images/m_main/dongwuleyuan.png"
                />
                <img
                  src="http://diandian.zgkpz.com/images/m_main/shenqishuwu.png"
                />
              </div>
            </div>
            <div class="part1">
              <img
                src="http://diandian.zgkpz.com/images/m_main/gaozhong.png"
                class="title"
              />
              <div>
                <img
                  src="http://diandian.zgkpz.com/images/m_main/senlintanxian.png"
                />
                <img
                  src="http://diandian.zgkpz.com/images/m_main/mofachengbao.png"
                />
                <img
                  src="http://diandian.zgkpz.com/images/m_main/dongwuleyuan.png"
                />
                <img
                  src="http://diandian.zgkpz.com/images/m_main/shenqishuwu.png"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Index",
  data: function () {
    return {
      screenWidth: document.body.clientWidth,
    };
  },
  created() {
    window.addEventListener("resize", this.handleResize);
  },
  mounted: function () {},
  methods: {
    handleResize() {
      if (document.body.clientWidth < 775) {
        this.$router.replace({ path: "/main" });
      }
    },
    jfrank() {
      this.$router.replace({ path: "/web/rank" });
    },
    myglod() {
      this.$router.replace({ path: "/web/gold" });
    },
    mylog() {
      this.$router.replace({ path: "/web/log" });
    },
  },
};
</script>
<style scoped>
.header {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.header img {
  width: 0.42rem;
  height: 0.59rem;
  margin: 0 0.4rem;
}
.tingyin {
  position: absolute;
  top: 0.5rem;
  left: 1.77rem;
  width: 0.5rem;
}
.content {
  display: inline-flex;
  justify-content: space-around;
}
.content2 {
  display: inline-flex;
  justify-content: space-around;
}
.part1 {
  background: url("http://diandian.zgkpz.com/images/m_main/huangseback.png")
    no-repeat;
  background-size: 100%100%;
  width: 2rem;
  height: 1.5rem;
  border-radius: 20px;
  margin: 0 0.35rem;
  position: relative;
}
.part1 img {
  width: 0.6rem;
  margin: 0 0.06rem;
}
img.title {
  width: 0.8rem;
  position: absolute;
  top: 0.15rem;
  left: 0.29rem;
}
.part1:nth-child(2) {
  background: url("http://diandian.zgkpz.com/images/m_main/ziseback.png")
    no-repeat;
  background-size: 100%100%;
}
.content2 .part1:nth-child(1) {
  background: url("http://diandian.zgkpz.com/images/m_main/lanseback.png")
    no-repeat;
  background-size: 100%100%;
}
.content2 .part1:nth-child(2) {
  background: url("http://diandian.zgkpz.com/images/m_main/greenback.png")
    no-repeat;
  background-size: 100%100%;
}
.part1 div {
  width: 1.5rem;
  margin: auto;
  margin-top: 0.32rem;
}
</style>
